@charset "utf-8";
body { 
    display: grid;
    grid-template-areas: 
      "header header"
      "nav article"
      "footer footer";
    grid-template-rows: 15% 1fr 15%;  
    grid-template-columns: 20% 1fr;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    }  
  header, footer, article, nav, div {
    padding: 1.2em;
    background-color: aliceblue;
    }
  #header {
    grid-area: header;
    display: flex;
    justify-content: space-around;
    align-items: center;
    }
    #header>ul{
        list-style: none;
        }
        #header>ul>li{
          float: left;
          margin-left: 10px;
        }
  #footer {
    grid-area: footer;
    }
    #footer>ul{
        list-style: none;
        }
        #footer>ul>li{
          float: left;
          margin-left: 10px;
        }
  #article { 
    grid-area: article;   
    display: flex;   
    flex-direction: column;
    }
    #article>div>div{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #article>div>div>img{
        width: 20%;
        margin: 1%;
    }
    .img{
      width: 40%;
    }
  #nav { 
    grid-area: nav; 
    }
  #div { 
    grid-area: ads; 
    } 
    .li{
      color: gold;
    }
    .a{
      color: gold;
    }
  /* Stack the layout on small devices/viewports. */
  @media all and (max-width: 575px) {
    body { 
      grid-template-areas: 
        "header"
        "nav"
        "article"
        "footer";
      grid-template-rows: 10% 1fr 1fr 17%;  
      grid-template-columns: 1fr;
   }
  }